<template>
  <div class="flag" v-bind:style="styleObject">
    <div class="flag-img">
      <img
        class="animate__bounceIn animate__animated  animate__zoomIn  animate__infinite animate__fast	1s"
        src="../assets/img/192.png"
        style="width:15px;height:15px;"
      />
    </div>
    <div class="flag-txt">{{ flagTitle }}</div>
  </div>
</template>
<script>
export default {
  name: "Flag",
  data() {
    return {
      styleObject: {
        top: this.flagTop,
        left: this.flagLeft,
      },
    };
  },
  //接收来自父组件的数据
  props: {
    "flag-top": {
      type: String,
      default: "900px",
    },
    "flag-left": {
      type: String,
      default: "900px",
    },
    "flag-title": {
      type: String,
      default: "标题",
    },
  },
};
</script>
<style>
.flag {
  position: fixed;
  cursor: pointer;
  width: 100px;
  height: auto;
  padding: 0px;
  z-index: 10000;
  /* background-color: rgba(0,0,0,0.3); */
  transition: all 0.5s;
}
.flag:hover{
	/* background-color: rgba(0,0,0,0.5); */
	font-weight:bold;
	font-size:18px;
}
.flag-img {
  vertical-align: middle;
  width: auto;
  float: left;
  height: 36px;
  line-height: 36px;
}
.flag-txt {
  width: 80px;
  padding-left: 9px;
  height: 36px;
  line-height: 36px;
  color: white;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
